import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail/Detail'

export default class dMessage extends Component {

    state = {
        messageList: [
            { id: '1', title: 'mes1' },
            { id: '2', title: 'mes2' },
            { id: '3', title: 'mes3' },
        ]
    }

    // push跳转
    pushShow = (id, title) => {
        // params
        this.props.history.push(`/home/message/detail/${id}/${title}`)

        // search
        this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

        // state
        this.props.history.push('/home/message/detail', { id, title })

    }

    // replace跳转
    replaceShow = (id, title) => {
        this.props.history.replace(`/home/message/detail/${id}/${title}`)
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.messageList.map((v, i) => {
                            return (
                                <li key={i}>
                                    {/* 向路由组件传递params参数 */}
                                    <Link to={`/home/message/detail/${v.id}/${v.title}`}>{v.title}</Link>
                                    &nbsp;<button onClick={() => this.pushShow(v.id, v.title)}>push</button>
                                    &nbsp;<button onClick={() => this.replaceShow(v.id, v.title)}>replace</button>

                                    {/* 向路由组件传递search参数 */}
                                    {/* <Link to={`/home/message/detail?id=${v.id}&title=${v.title}`}>{v.title}</Link> */}

                                    {/* 向路由组件传递state参数 */}
                                    {/* <Link replace to={{
                                        pathname: '/home/message/detail',
                                        state: { id: v.id, title: v.title }
                                    }}>{v.title}</Link> */}
                                </li>
                            )
                        })
                    }
                </ul>
                <hr />
                {/* 声明接受params参数 */}
                <Route path="/home/message/detail/:id/:title" component={Detail} />

                {/* search参数无须声明接收 */}
                {/* <Route path="/home/message/detail" component={Detail} /> */}

            </div>
        )
    }
}
